<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Access-Control-Allow-Origin" content="*" />
      <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <link rel="stylesheet" href="../static/layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="../static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../static/css/home.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700&amp;subset=cyrillic" rel="stylesheet">
    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic&#038;ver=5.1.4' type='text/css'/>
    <link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="../static/bootstrap/css/bootstrap-dialog.min.css">
    <link rel="stylesheet" href="../static/css/font-awesome.css">

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="../static/layui/layui.js" charset="utf-8"></script>
    <script src="../static/bootstrap/js/bootstrap-dialog.min.js"></script>

    <title>Title</title>
</head>
<body style="overflow:scroll;">



<div style="height: 80px;box-sizing:border-box;box-shadow: 0 0 14px -6px rgba(0,0,0,.2)!important;">
    <nav>
        <ul style="list-style-type:none;height: 80px;max-width: 960px;margin: 0 auto;padding: 0px;display: flex;align-items: center;">
<!--            <li><a href="#" style="font-size: 34px;font-weight: 600;margin-right: 80px;">ICLRBBN</a></li>-->
            <li class="menu"><a><img src="../static/minlogo4.png" style="height: 60px;vertical-align: middle"></a></li>
            &nbsp;
            <li class="menu"><a href="{{ url_for('home')  }}" class="alink">
                <i class="fa fa-home" aria-hidden="true"></i>
                Home</a></li>
            &nbsp;
            <li class="menu" id="down">
                <a href="javascript:void(0)" class="alink" >
<!--                    <i class="fa fa-line-chart" aria-hidden="true"></i>-->
<!--                    <i class="fa fa-bar-chart" aria-hidden="true"></i>-->
                    <i class="fa fa-sort-amount-desc" aria-hidden="true"></i>
                    Prediction
                    <i class="fa fa-angle-down" aria-hidden="true"></i>
                </a>
                <ul id="la">
                    <li>
                        <a href="{{url_for('LncRNA')}}" class="alink" style="font-size: 15px">LncRNA-related diseases</a>
                    </li>
                    <li>
                        <a href="{{ url_for('Disease')  }}" class="alink" style="font-size: 15px">disease-related LncRNAs</a>
                    </li>
                </ul>
            </li>
            &nbsp;
<!--            <li class="menu"><a href="#" class="alink">Disease-LncRNA Association</a></li>-->
<!--            <li class="menu"><a href="#" class="alink">LncRNA-Disease Association</a></li>-->
            <li class="menu"><a href="{{ url_for('Download')  }}" class="alink">
                <i class="fa fa-download" aria-hidden="true"></i>
                Downloads</a></li>
            &nbsp;
            <li class="menu"><a href="{{ url_for('Help')  }}" class="alink">
                <i class="fa fa-file-text" aria-hidden="true"></i>
                Help</a></li>
            &nbsp;
            <li class="menu"><a href="{{ url_for('Contact')  }}" class="alink">
                <i class="fa fa-envelope" aria-hidden="true"></i>
                Contacts</a></li>

        </ul>
    </nav>
</div>


<div style="margin: 40px auto;max-width: 960px;align-items: center;">

        <div class="panel panel-default">
          <div class="panel-heading" align="center">Predicting the novel LncRNA-disease associations based on the disease name</div>
          <div class="panel-body">
            <form class="form-horizontal" role="form" method="POST" id="form1" action="{{ url_for('Disease') }}">

                <div align="center">
                    <br>
                    step1: Input disease name &emsp;
                    <a href="" id="samplePredict">sample example</a>
                    <br><br>
                </div>
                <div class="form-inline" align="center">
                    <div class="form-group">
                    <label for="disease">Disease: </label>
                    <input type="text"class="form-control" id="disease" name="disease">
                    </div>
                </div>

                <br>

                <div align="center">
                    step2: Predict &emsp;
                    <br><br>
                </div>

            <div class="form-group">
                <div class="col-sm-offset-1 col-sm-10" align="center">
                    <button type="button" class="btn btn-primary" id="submit" name="submit" onclick="Search_Disease()">Predict</button>
                    &emsp;
                    <button type="button" class="btn btn-primary" id="reset" name="reset">Reset</button>
                </div>
            </div>
        </form>
          </div>
        </div>


                <table class="layui-hide" id="test" lay-filter="test"></table>

</div>




<div style="font-family: Arial;font-size: 14px;max-width: 960px;margin: auto;text-align: center">
    <span style="margin: 1ex 0;font-family: monospace;">The website has been tested on Chrome, Microsoft Edge. For better experience, please use Chrome browsers.</span>
</div>
<div style="text-align: center;color: #2b7bb9;font-size: 14px;font-family: monospace;background-color: #f8fafa;height: 20ex;line-height: 20ex;">
    Copyright © 2020
</div>









<script>
    layui.use(['element', 'table', 'form', 'jquery', 'laydate','layer'], function () {
        var table = layui.table;         //表格
        var form = layui.form;           //表单
        var layer = layui.layer;         //弹层
        var $ = layui.jquery;
		var exportData = " ";			//定义全局变量

        var ins1=table.render({
            elem: '#test',
            url: '/tabledata',
            toolbar: '#toolbarDemo'
            ,title:'Result'
            ,defaultToolbar: [],
            page:false
              ,text: {
                    none: 'No matching records found' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
                  }
            ,cols: [[
                  {field:'disease', title:'Disease', sort: false, totalRowText: '合计行'}
                  ,{field:'LncRNA', title:'LncRNA', sort: true}
                  ,{field:'score', title:'Associated score', sort: true}
            ]],
            done: function (res, curr, count) {
                exportData=res.data; 		//获取表格中的数据集合。
            }
        });

        $("#xls").click(function(){
	       	table.exportFile(ins1.config.id,exportData, 'xls');
        })
        $("#csv").click(function(){
	       	table.exportFile(ins1.config.id,exportData, 'csv');
        })
    })
</script>


<script type="text/html" id="toolbarDemo">

        <div class="btn-group" style="float: left">
       <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">  Download <span class="caret"></span></button>
                <ul class="dropdown-menu" role="menu" id='downmenu'>
                  <li role="menuitem" data-type="json">
                    <li role="menuitem" data-type="xml" id="xls"><a href="javascript:void(0)">XLS</a></li>
                    <li role="menuitem" data-type="csv" id="csv"><a href="javascript:void(0)">CSV</a></li>

                  </ul>

        </div>
</script>


<script type="text/html" id="toolbarDemo1">

<div >
    <div class="btn-group" style="float: left">
   <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">  Download <span class="caret"></span></button>
            <ul class="dropdown-menu" role="menu" id='downmenu'>
              <li role="menuitem" data-type="json">
                <li role="menuitem" data-type="xml" id="xls"><a href="javascript:void(0)">XLS</a></li>
                <li role="menuitem" data-type="csv" id="csv"><a href="javascript:void(0)">CSV</a></li>

              </ul>
    </div>
    <div>
        <p style="text-align: center; margin: 0", >Result: There are <span id='total'></span> associated LncRNAs.</p>
    </div>
</div>
</script>



    <script>
        function Search_Disease() {
            {#var lncrna = document.getElementById('lncrna').value;#}
            var disease= $('#disease').val();

            if (disease=='')
                Note('Please input Disease');
            else{


                    $.ajax({
                        url:"/Disease/",
                        type:"POST",
                        data:{"disease":disease},
                        success:function(result){
                            if (result=='')
                                Note('The Disease is not included in the database');
                            else
                                {
                                {#alert(result.flag);#}
                                LoadTable();
                                 $.ajax({
                                        url:"/tabledata/",
                                        type:"POST",
                                        data:{"disease":disease},
                                        success:function(result){
                                                {#console.log(result.count);#}
                                                if (result.count==0)
                                                 Note('No matching Disease');
                                        },
                                        error:function(data){
                                                alert('fail00');
                                        }
                                    });

                                }

                        },
                            error: function(xhr, textStatus, errorThrown){
        　　　alert("进入error---");
　　　　　　　　alert("状态码："+xhr.status);
　　　　　　　　alert("状态:"+xhr.readyState);//当前状态,0-未初始化，1-正在载入，2-已经载入，3-数据进行交互，4-完成。
　　　　　　　　alert("错误信息:"+xhr.statusText );
　　　　　　　　console.log("返回响应信息："+xhr.responseText );//这里是详细的信息
　　　　　　　　alert("请求状态："+textStatus); 　　　　　　　　
　　　　　　　　alert(errorThrown); 　　　　　　　　
　　　　　　　　alert("请求失败");
    }
                    });




                }
            }

            function LoadTable() {
                layui.use(['element', 'table', 'form', 'jquery', 'laydate','layer'], function () {
                var table = layui.table;         //表格
                var form = layui.form;           //表单
                var layer = layui.layer;         //弹层
                var $ = layui.jquery;
                var exportData = " ";			//定义全局变量

                var ins1=table.render({
                    elem: '#test',
                    url: '/tabledata',
                    toolbar: '#toolbarDemo1'
                    ,defaultToolbar: [],
                    page:false
                      ,text: {
                            none: 'No matching records found' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
                          }
                    ,cols: [[
                          {field:'disease', title:'Disease', sort: false, totalRowText: '合计行'}
                          ,{field:'LncRNA', title:'LncRNA', sort: true}
                          ,{field:'score', title:'Associated score', sort: true}
                    ]],
                    done: function (res, curr, count) {
                        exportData=res.data; 		//获取表格中的数据集合。
                        $("#total").html(count);
                    }
                });

                $("#xls").click(function(){
                    table.exportFile(ins1.config.id,exportData, 'xls');
                })
                $("#csv").click(function(){
                    table.exportFile(ins1.config.id,exportData, 'csv');
                })
            })

            }

            function Note(str) {
                BootstrapDialog.show({
                    type: BootstrapDialog.TYPE_WARNING,
                    title: 'Note ',
                    message: str,
                    buttons: [{
                        label: 'Close',
                        action: function (dialogItself) {
                            dialogItself.close();
                        }
                    }]
                })
            }


            $('#reset').click(function () {

                location.reload();

            })

            $('#samplePredict').click(function(){
              $('#disease').val('colorectal cancer');
              return false;
            })

    </script>

<script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  //…
});
</script>





</body>
</html>